<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./jquery-1.7.2/jquery.min.js"></script>
    <style>
    *{
        padding:0;
        margin:0;
    }
        li{
            list-style:none;
            float: left;
        }
        .box{
            border:1px solid;
            width: 600px;
            height: 175px;
            overflow: hidden;

        }
        ul{
            width: 1800px;
            height:175px;
            margin-left:0;

        }
    </style>
</head>
<body>
    <div class="box">
            <ul>
               <li><img src="./img/1(1).jpg" width="300px" 
               height="175px" alt=""> </li>
               <li><img src="./img/1(2).jpg" width="300px" 
               height="175px" alt=""> </li>
               <li><img src="./img/1(3).jpg" width="300px" 
               height="175px" alt=""> </li>
               <li><img src="./img/1(4).jpg" width="300px" 
               height="175px" alt=""> </li>
               <li><img src="./img/1(1).jpg" width="300px" 
               height="175px" alt=""> </li>
               <li><img src="./img/1(2).jpg" width="300px" 
               height="175px" alt=""> </li>
               
           
            </ul>
    </div>
   
</body>
    <script>
        $(function(){
            // 0. 定义保存变量
            var offset = 0;
            var color = "white";
            // 1. 动图
            var timer; 
            function autoPlay(){
                    timer = setInterval(function(){
                    offset += -10;
                    $("ul").css("marginLeft",offset)
                    if(offset < -1200){
                        offset =0;
                    }
                },50);
            }
            autoPlay();
            // 2. 停止
            $("ul>li").mouseover(function(){
               clearInterval(timer);
               $(this).css("marginTop","10px")
               console.log($(this).index());
            }).mouseout(function(){
                autoPlay();              
               
            })


        })
    </script>
</html>